<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
  <script src="static/echarts.min.js"></script>
  <script src="static/plug-in.min.js"></script>
  <link rel="stylesheet" href="static/index.css" media="all"/>
</head>
<body>
  <div class="positon">
    <span></span><span>水平位置: </span><input id="x"></input><span>,垂直位置: </span><input id="y"></input>
    <span id="y"><a class="ahref">保存位置</a></span>
  </div>
  <div class="point">
  </div>
  <div id="echart" class="echart"></div>
  <div class="data">
    <div>
      <span id="monthNum">暂无</span>
    </div>
    <div>
      <span id="waitNum">暂无</span>
      <span id="rate">暂无</span>
    </div>
    <div>
      <div id="weekJob" class="item title">
        <span>设备名称</span>
        <span>保养任务</span>
        <span>报修时间</span>
      </div>
<!--      <div class="item">
        <span>设备名称</span>
        <span>正常</span>
        <span>2021/03/21</span>
      </div>-->
    </div>
  </div>
</body>

<script>
  const ACCESS_TOKEN = 'Access-Token'
  const VUE_STORE_BASE = 'pro__'

  var id = window.location.search.split("id=")[1]
  id = filterUrlData(id);

  var xx =  window.location.search.split("zjm=")[1];
  xx = filterUrlData(xx) || 0;

  var yy = window.location.search.split("jbdh=")[1] || 0;
  yy = filterUrlData(yy);

  // 初始化设备位置
  $(function(){

    $('#x').val(xx);
    $('#y').val(yy);
    $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px');

    $('#echart').click(function(e) {
      xx = e.pageX || 0;
      yy = e.pageY || 0;
      console.log(xx+'   '+yy);
      $('#x').val(xx);
      $('#y').val(yy);
      $('.point').css('left',xx).css('top',yy);
    })

    $('#x').on('input',function(e){
      xx = e.delegateTarget.value
      $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
    });

    $('#y').on('input',function(e){
      yy = e.delegateTarget.value
      $('.point').attr("style", 'left: ' + xx + 'px;top: ' + yy + 'px')
    });

    $('.ahref').click(function(e) {
      if(id == null){
        alert('请设置设备')
        return
      }
      if(xx==null || yy==null || xx == 0 || yy==0){
        alert('请点击位置，该位置将作为设备的显示位置')
        return
      }
      var data = {id: id, zjm:xx, jbdh: yy}
      $.ajax({
        type: "PUT",
        url: "/api/sb/infos/" + id,
        headers: getHeader(),
        data: JSON.stringify(data),
        success: function(response) {
          const data = response.data;
          alert("保存成功。")
        },
        error: function(xhr, textStatus, errorThrown) {
          error(xhr, textStatus, errorThrown);
        }
      });
    })
  })

  /**
   * filterUrlData 过滤url数据
   * @param  Boolean     {name}
   * @param  Boolean     {value}
   * @param  Boolean     {data}
   * Created by preference on 2020/08/01
   */
  function filterUrlData (data) {
    if (data) {
      var dataArr = data.split('');
      var tempArr = [];
      for(var i = 0; i <= dataArr.length; i++){
        if (dataArr[i] != '&') {
          tempArr.push(dataArr[i]);
        } else {
          break;
        }
      }
      return tempArr.join('');
    }
  };

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'))

var img = new Image()
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')

canvas.width = myChart.getWidth() * window.devicePixelRatio
canvas.height = myChart.getHeight() * window.devicePixelRatio

var fullImage = new Image()
img.onload = function () {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  fullImage.src = canvas.toDataURL()
  setTimeout(function () {
    myChart.resize()
  }, 100)
}

img.src = ''

var option = {
  // 背景
  backgroundColor: {
    repeat: 'no-repeat',
    image: fullImage
  },
  // 地图
  geo: {
    map: 'world',
    silent: true,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    itemStyle: {
      normal: {
        opacity: 0.8,
        borderWidth: 0,
        color: '#a53d13'
      }
    }
  },
  title: {
    text: '',
  },
  // 开启工具栏
  tooltip: {
    "trigger": "item",
    "confine": true
  },
  series: [{
    name: '正常',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{@value}',
        position: 'left',
        show: false
      }
    },
    itemStyle: {
      normal: {
        color: '#17bf9e',
        shadowBlur: 200,
        shadowColor: '#17bf9e'
      }
    },
    zlevel: 1
  }, {
    name: '异常点',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin', // 气泡
    symbolSize: 50,
    label: {
      normal: {
        show: true,
        formatter: '{@value}',
        textStyle: {
          color: '#fff',
          fontSize: 11
        }
      }
    },
    itemStyle: {
      normal: {
        color: 'red'
      }
    },
    zlevel: 6,
    data: [
    ]
  }, {
    name: '异常图片和名称',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
    ],
    showEffectOn: 'render',
    rippleEffect: {
      brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
      normal: {
        formatter: '{@value}',
        position: 'left',
        show: false
      }
    },
    itemStyle: {
      normal: {
        color: 'yellow',
        shadowBlur: 200,
        shadowColor: 'yellow'
      }
    },
    zlevel: 1
  }]
}

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

function getHeader(){
  return {
    Authorization: getToken(),
    accept: "application/json; charset=utf-8",
    'Content-Type': 'application/json;charset=UTF-8'
    // "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept"
  }
}

function getToken(){
  const storeTokenJson = JSON.parse(localStorage.getItem(VUE_STORE_BASE+ACCESS_TOKEN))
  return 'Bearer ' + storeTokenJson.value
}
</script>

<style>
  .positon{
    position: absolute;
    top: 20px;
    left: 40%;
    z-index: 1000;
  }
  .point{
    position: absolute;
    padding: 5px;
    background: blue;
    border-radius: 5px;
    z-index: 1000;
  }
  .ahref{
    background: blue;
    padding: 8px;
    cursor: pointer;
  }
</style>
</html>
